<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" name="viewport">
	<title>translate</title>
	<link type="text/css" rel="stylesheet" href="../css/base.css"/>
	<style>
		body{
			background:#2D49FD;
			min-height: 100%;
		}
		.navBtn{
			text-align: center;
			margin-top: 30px;
		}
		.btns{
			color: #fff;
			font-size: 18px;
			text-align: center;
			width: 100px;
			padding: 10px 0;
			background: #ff1234;
			border-radius: 3px;
			cursor: pointer;
		}
		.btns:hover{
			background: #F9435D;
		}
		.md-overlay{
			position: fixed;
			display: none;
			z-index: 2;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
			transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
		}
		.md-modal{
			position: fixed;
			z-index: 1000;
			top: 50%;
			left: 50%;
			visibility: hidden;
			width: 40%;
			max-width: 600px;
			min-width: 310px;
			transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%); /*Safari and Chrome*/
			-moz-transform: translate(-50%,-50%); /*firefox*/
			-ms-transform: translate(-50%,-50%);  /* IE9 */
		}
		.show > .md-contain{
			opacity: 1;
			transform: scale(1,1);
			-webkit-transform: scale(1,1); /*Safari and Chrome*/
			-moz-transform: scale(1,1); /*firefox*/
			-ms-transform: scale(1,1);  /* IE9 */
		}
		.md-contain{
			color: #fff;
			width: 100%;
			background: #2D49FD;
			opacity: 0;
			transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
		}
		.md-contain > h2{
			padding: 15px;
			font-size: 24px;
			text-align: center;
			background: rgba(255,255,255,0.2);
			text-shadow: 1px 1px 0 #c1c1c1;
		}
		.md-main{padding: 20px;}
		.md-main > p{font-size: 20px;text-shadow: 1px 1px 0 #c1c1c1;}
		.md-main li{
			margin: 6px 0;
			padding: 0 18px;
			font-size: 16px;
			text-shadow: 1px 1px 0 #c1c1c1;
		}
		.md-fot{
			text-align: center;
			padding-top: 15px;
		}
		.effect1{
			transform: scale(0.8,0.8);
			-webkit-transform: scale(0.8,0.8); /*Safari and Chrome*/
			-moz-transform: scale(0.8,0.8); /*firefox*/
			-ms-transform: scale(0.8,0.8);  /* IE9 */
		}
	</style>
</head>
<body>
	<div class="navBtn" id="navBtn">
		<button class="btns">center</button>
	</div>
	<div class="md-overlay" id="lay"></div>
	<div class="md-modal" id="modal">
		<div class="md-contain effect1">
			<h2>This Is Title</h2>
			<div class="md-main">
				<p>This is the title of the content</p>
				<ul>
					<li>减出轻松，减出自在；减出健康，减出年轻；减出快乐，减出幸福！</li>
					<li>万事万物应该尽量简单，而不是更简单</li>
					<li>狐狸知道很多事，但是刺猬知道最重要的事</li>
					<li>关键在于总结所犯的错误，而不是企图掩盖它。</li>
				</ul>
				<div class="md-fot"><button class="btns" id="closeBtn">close</button></div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="../common/jquery-3.1.1.min.js"></script>
<script>
	(function(){
		function md(){
			
		}
		md.prototype = {
			init: function(){
				var scope = this;
				scope.btnsEven();
			},
			btnsEven: function(){
				$("#closeBtn").on('click',function(){
					$("#lay").css("display","none");
					$("#modal").removeClass("show").css("visibility","hidden");
				});
				$("#navBtn").on('click','button',function(){
					$("#lay").css("display","block");
					$("#modal").addClass("show").css("visibility","visible");
				});
			}
		}
		var m = new md();
		m.init();
	})()
</script>
